<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - Synapse Team</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            padding: 24px;
        }

        .settings-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .settings-header {
            background: #007AFF;
            color: white;
            padding: 24px;
            text-align: center;
        }

        .settings-header h1 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .settings-header p {
            opacity: 0.9;
            font-size: 14px;
        }

        .settings-content {
            padding: 32px;
        }

        .settings-section {
            margin-bottom: 32px;
        }

        .settings-section h2 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            color: #333;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 8px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #007AFF;
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        .form-row {
            display: flex;
            gap: 16px;
        }

        .form-row .form-group {
            flex: 1;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .btn-primary {
            background-color: #007AFF;
            color: white;
        }

        .btn-primary:hover {
            background-color: #0056CC;
        }

        .btn-secondary {
            background-color: #f8f9fa;
            color: #333;
            border: 1px solid #ddd;
        }

        .btn-secondary:hover {
            background-color: #e9ecef;
        }

        .settings-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px solid #e0e0e0;
        }

        .status-message {
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 16px;
            font-size: 14px;
        }

        .status-message.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status-message.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .checkbox-group input[type="checkbox"] {
            width: auto;
        }
    </style>
</head>
<body>
    <div class="settings-container">
        <div class="settings-header">
            <h1>设置</h1>
            <p>配置 Synapse Team 应用</p>
        </div>
        
        <div class="settings-content">
            <div id="status-message"></div>
            
            <div class="settings-section">
                <h2>AI 模型配置</h2>
                <div class="form-row">
                    <div class="form-group">
                        <label>模型 URL</label>
                        <input type="text" id="ai-url" placeholder="http://localhost:11434">
                    </div>
                    <div class="form-group">
                        <label>模型名称</label>
                        <input type="text" id="ai-model" placeholder="Gemma3:4b">
                    </div>
                </div>
                <div class="form-group">
                    <label>API 密钥 (可选)</label>
                    <input type="password" id="api-key" placeholder="输入 API 密钥">
                </div>
                <button class="btn btn-secondary" onclick="testConnection()">测试连接</button>
            </div>
            
            <div class="settings-section">
                <h2>项目设置</h2>
                <div class="form-group">
                    <label>默认项目路径</label>
                    <input type="text" id="default-project-path" placeholder="选择默认项目路径">
                </div>
                <div class="form-group">
                    <label>自动保存间隔 (分钟)</label>
                    <input type="number" id="auto-save-interval" value="5" min="1" max="60">
                </div>
                <div class="checkbox-group">
                    <input type="checkbox" id="auto-save-enabled" checked>
                    <label for="auto-save-enabled">启用自动保存</label>
                </div>
            </div>
            
            <div class="settings-section">
                <h2>界面设置</h2>
                <div class="form-group">
                    <label>主题</label>
                    <select id="theme">
                        <option value="auto">自动</option>
                        <option value="light">浅色</option>
                        <option value="dark">深色</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>字体大小</label>
                    <select id="font-size">
                        <option value="small">小</option>
                        <option value="medium" selected>中</option>
                        <option value="large">大</option>
                    </select>
                </div>
                <div class="checkbox-group">
                    <input type="checkbox" id="show-line-numbers" checked>
                    <label for="show-line-numbers">显示行号</label>
                </div>
            </div>
            
            <div class="settings-section">
                <h2>高级设置</h2>
                <div class="form-group">
                    <label>日志级别</label>
                    <select id="log-level">
                        <option value="error">错误</option>
                        <option value="warn">警告</option>
                        <option value="info" selected>信息</option>
                        <option value="debug">调试</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>自定义配置</label>
                    <textarea id="custom-config" placeholder="输入自定义 JSON 配置"></textarea>
                </div>
            </div>
            
            <div class="settings-actions">
                <button class="btn btn-secondary" onclick="resetSettings()">重置</button>
                <button class="btn btn-primary" onclick="saveSettings()">保存</button>
            </div>
        </div>
    </div>

    <script>
        let currentConfig = {};

        // 加载设置
        async function loadSettings() {
            try {
                currentConfig = await window.electronAPI.getConfig();
                updateForm();
            } catch (error) {
                showStatus('加载设置失败: ' + error.message, 'error');
            }
        }

        // 更新表单
        function updateForm() {
            if (currentConfig.ai?.model) {
                document.getElementById('ai-url').value = currentConfig.ai.model.url || '';
                document.getElementById('ai-model').value = currentConfig.ai.model.name || '';
            }
            
            if (currentConfig.apiKey) {
                document.getElementById('api-key').value = currentConfig.apiKey;
            }
            
            if (currentConfig.defaultProjectPath) {
                document.getElementById('default-project-path').value = currentConfig.defaultProjectPath;
            }
            
            if (currentConfig.autoSave) {
                document.getElementById('auto-save-interval').value = currentConfig.autoSave.interval || 5;
                document.getElementById('auto-save-enabled').checked = currentConfig.autoSave.enabled !== false;
            }
            
            if (currentConfig.theme) {
                document.getElementById('theme').value = currentConfig.theme;
            }
            
            if (currentConfig.fontSize) {
                document.getElementById('font-size').value = currentConfig.fontSize;
            }
            
            if (currentConfig.showLineNumbers !== undefined) {
                document.getElementById('show-line-numbers').checked = currentConfig.showLineNumbers;
            }
            
            if (currentConfig.logLevel) {
                document.getElementById('log-level').value = currentConfig.logLevel;
            }
            
            if (currentConfig.customConfig) {
                document.getElementById('custom-config').value = JSON.stringify(currentConfig.customConfig, null, 2);
            }
        }

        // 保存设置
        async function saveSettings() {
            try {
                const newConfig = {
                    ai: {
                        model: {
                            url: document.getElementById('ai-url').value,
                            name: document.getElementById('ai-model').value
                        }
                    },
                    apiKey: document.getElementById('api-key').value,
                    defaultProjectPath: document.getElementById('default-project-path').value,
                    autoSave: {
                        interval: parseInt(document.getElementById('auto-save-interval').value),
                        enabled: document.getElementById('auto-save-enabled').checked
                    },
                    theme: document.getElementById('theme').value,
                    fontSize: document.getElementById('font-size').value,
                    showLineNumbers: document.getElementById('show-line-numbers').checked,
                    logLevel: document.getElementById('log-level').value
                };

                const customConfigText = document.getElementById('custom-config').value;
                if (customConfigText.trim()) {
                    try {
                        newConfig.customConfig = JSON.parse(customConfigText);
                    } catch (error) {
                        showStatus('自定义配置 JSON 格式错误', 'error');
                        return;
                    }
                }

                await window.electronAPI.updateConfig(newConfig);
                currentConfig = { ...currentConfig, ...newConfig };
                showStatus('设置已保存', 'success');
            } catch (error) {
                showStatus('保存设置失败: ' + error.message, 'error');
            }
        }

        // 重置设置
        function resetSettings() {
            if (confirm('确定要重置所有设置吗？')) {
                currentConfig = {};
                updateForm();
                showStatus('设置已重置', 'success');
            }
        }

        // 测试连接
        async function testConnection() {
            const url = document.getElementById('ai-url').value;
            const model = document.getElementById('ai-model').value;
            
            if (!url || !model) {
                showStatus('请填写模型 URL 和名称', 'error');
                return;
            }

            try {
                const success = await window.electronAPI.testAIConnection({
                    url: url,
                    name: model
                });

                if (success) {
                    showStatus('连接测试成功', 'success');
                } else {
                    showStatus('连接测试失败', 'error');
                }
            } catch (error) {
                showStatus('连接测试失败: ' + error.message, 'error');
            }
        }

        // 显示状态消息
        function showStatus(message, type) {
            const statusDiv = document.getElementById('status-message');
            statusDiv.textContent = message;
            statusDiv.className = `status-message ${type}`;
            
            setTimeout(() => {
                statusDiv.textContent = '';
                statusDiv.className = 'status-message';
            }, 3000);
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadSettings();
        });
    </script>
</body>
</html> 